/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text, TouchableOpacity, Dimensions,
    View
} from 'react-native';

var { width, height } = Dimensions.get('window');

class Page extends Component {
    constructor(props) {
        super(props);
        this.state = {
            PageAllNum: this.props.PageAllNum,
            activePage: this.props.activePage,
            prevDis: false,
            nextDis: false,
        };
        this.ChangeRusult(this.props.PageAllNum, this.props.activePage);
    }

    componentWillMount() {
        console.log('fenye')
        this.props.onRef(this)
        this.ChangeRusult(this.props.PageAllNum, this.props.activePage);
    }

    ChangeRusult(PAN, AC) {
        var result = [];
        PAN = parseInt(PAN);
        AC = parseInt(AC);
        console.log(PAN, AC)

        if (AC <= 1) {//禁用上一步
            AC = 1;
            this.setState({
                prevDis: true,
            });
        } else {
            this.setState({
                prevDis: false,
            });
        }
        if (AC >= PAN) {//禁用下一步
            AC = PAN
            this.setState({
                nextDis: true,
            });
        } else {
            this.setState({
                nextDis: false,
            });
        }
        if (PAN > 6 && AC > 2 && PAN - AC >= 2) {
            result = [AC - 2, AC - 1, AC, AC + 1, '...', PAN];
        } else if (PAN > 6 && AC == 2) {
            result = [AC - 1, AC, AC + 1, AC + 2, '...', PAN];
        } else if (PAN > 6 && AC == 1) {
            result = [AC, AC + 1, AC + 2, AC + 3, '...', PAN];
        } if (PAN > 6 && PAN - AC == 2) {
            result = [1, '...', AC - 1, AC, AC + 1, PAN];
        }
        if (PAN > 6 && PAN - AC == 1) {
            result = [1, '...', AC - 2, AC - 1, AC, PAN];
        }
        if (PAN > 6 && PAN == AC) {
            result = [1, '...', AC - 3, AC - 2, AC - 1, AC];
        }
        else if (PAN <= 6) {
            for (var i = 0; i < PAN; i++) {
                result.push(i + 1);
            }
        }
        console.log(result)
        this.setState({
            arr: result,
            activePage: AC,
        });
        this.props.callBack(AC);//向父组件回调传值
        this.callBack(AC);//当前组件回调传值
    }
    //页码回调事件
    callBack(Page) {
        // console.log('当前页码数是:'+Page);
        // alert('当前页码数是:'+Page);
    }

    clickPage(data) {
        if (data !== '...') {
            this.ChangeRusult(this.props.PageAllNum, data);
        }
    }
    prevPage() {
        var _activePage = this.state.activePage;
        if (_activePage > 1) {
            this.ChangeRusult(this.props.PageAllNum, _activePage - 1);
        }
    }
    nextPage() {
        var _activePage = this.state.activePage;
        if (_activePage < this.state.PageAllNum) {
            this.ChangeRusult(this.props.PageAllNum, _activePage + 1);
        }
    }
    render() {
        return (
            <View style={styles.wrap}>
                <Button style={{ width: 40 }} PageNum={'首页'} onPress={() => this.setState({ activePage: 1 }, () => { this.ChangeRusult(this.props.PageAllNum, 1) })}></Button>
                <Button PageNum={"<"} onPress={() => this.prevPage()} Disabled={this.state.prevDis} />
                {
                    this.state.arr.map((data, index) => (
                        <Button PageNum={data} key={index} active={this.state.activePage} onPress={() => this.clickPage(data)} />
                    ))
                }
                <Button PageNum={">"} onPress={() => this.nextPage()} Disabled={this.state.nextDis} />
                <Button style={{ width: 40 }} PageNum={"尾页"} onPress={() => {
                    this.setState({ activePage: this.state.PageAllNum }, () => { this.ChangeRusult(this.props.PageAllNum, this.props.PageAllNum) })
                }} Disabled={this.state.nextDis} />
            </View >
        );
    }
}

class Button extends Component {
    constructor(props) {
        super(props);
        this.state = {
            active: this.props.active,
            thisPage: this.props.PageNum,
        };
    }
    render() {
        if (this.props.PageNum == this.props.active) {
            return (
                <TouchableOpacity onPress={this.props.onPress} style={styles.buttonActive}>
                    <Text style={styles.buttonFontActive}>{this.props.PageNum}</Text>
                </TouchableOpacity>
            )
        } else {
            return (
                <TouchableOpacity onPress={this.props.onPress} style={styles.button} disabled={this.props.Disabled}>
                    <Text style={styles.buttonFont}>{this.props.PageNum}</Text>
                </TouchableOpacity>
            )
        }

    }
}

const styles = StyleSheet.create({
    //父组件样式
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    //分页器的样式
    wrap: {
        width: width,
        paddingLeft: 10,
        paddingRight: 10,
        height: 50,
        flexDirection: 'row',
        justifyContent: 'space-between',
        // justifyContent: 'flex-start',
        alignItems: 'center',
        // backgroundColor: '#F5FCFF',
    },
    buttonBig: {
        width: 40,
    },
    button: {
        // flex: 1,
        minWidth: 20,
        paddingLeft: 2,
        paddingRight: 2,
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor: '#F5FCFF',
        // borderWidth: 0.5,
        // borderStyle: 'solid',
        // borderColor: '#638AD0',
        marginLeft: 2,
        marginRight: 2,
    },
    buttonFont: {
        fontSize: 14,
        color: '#000',
    },
    buttonActive: {
        minWidth: 20,
        justifyContent: 'center',
        alignItems: 'center',
        color: '#638AD0',
        // backgroundColor: '#16865f',
        // borderWidth: 0.5,
        // borderStyle: 'solid',
        // borderColor: '#638AD0',
        marginLeft: 2,
        marginRight: 2,
    },
    buttonFontActive: {
        fontSize: 14,
        color: '#638AD0',
    },
});

export default Page